<template>
  <div>
    <!-- 分隔线 -->
    <el-divider></el-divider>
    <!-- 表单 -->
    名称：
    <el-input
      v-model="name"
      @keyup.native.enter="search"
      placeholder="名称关键字"
      style="width: 200px"
    ></el-input>

    &nbsp;
    <el-button type="primary" @click="search">查询</el-button>
    <el-divider content-position="left">列表数据</el-divider>
    <!-- 展示商品列表数据 -->
    <person
      v-for="item in funrnishings"
      :key="item.id"
      :name="item.title"
      :avatar="item.index_img"
      @delete="deleteShopping(item.id, $event)"
    >
      >
    </person>
  </div>
</template>

<script>
import Person from "../../components/Person.vue";
import myaxios from "../../http/MyAxios";
import httpApi from "../../http/index";
import axios from "axios";

export default {
  components: { Person },
  data() {
    return {
      name: "", //绑定商品关键字
      funrnishings: [], //绑定所有商品
    };
  },

  mounted() {
    this.listCosmettology();
  },
  methods: {
    //删除
    deleteShopping(id, event) {
      console.log("接收到了参数:", event);
      this.$confirm("确定删除吗?", "提示", {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then((res) => {
          httpApi.shoppingApi.queryshoppingApiDel(id).then((res) => {
              console.log("删除成功");
              this.search()
          
          });
        })
        .catch((err) => {});
    },

    /** 搜索 */
    search() {
      if (this.name.trim() == "") {
        this.listCosmettology();
      } else {
        this.listCosmettologyByName();
      }
    },

    /** 通过关键字查询商品列表 */
    listCosmettologyByName() {
      //调用接口，返回promise
      let name = this.name;
      httpApi.shoppingApi.queryShoppingByName(name).then((res) => {
        console.log("模糊查询", res);
        this.funrnishings = res.data;
      });
    },

    //列出数码配件商品
    listCosmettology() {
      httpApi.shoppingApi.queryElectron().then((res) => {
        console.log(res);
        this.funrnishings = res.data;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
</style>
<style>
.a1 {
  padding: 10px 0 0 0;
}
</style>